<template>
  <div class="wrap">
    <nav>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
      >
        <el-menu-item index="4">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><setting /></el-icon>
            <span>设置</span>
          </template>
          <el-menu-item index="2-1">交易设置</el-menu-item>
          <el-menu-item index="2-2">客服设置</el-menu-item>
          <el-menu-item index="2-3">上传设置</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </nav>
    <main>
      <div class="header">
        <el-icon class="refresh"><RefreshRight /></el-icon>
        <el-link icon="User" href="/login">&nbsp;系统管理员</el-link>
      </div>
      <div class="page">
        华杉商城系统登录
      </div>
    </main>
  </div>
</template>
<script setup>
</script>
<style scoped>
.wrap{height: 100vh;background-color: #eef2f5;display: flex;}
nav{width: 160px;background-color: #545c64;}
main{flex-grow: 1;}
.refresh{margin-right: auto;}
.header{height: 60px;background-color: #fff;display: flex;align-items: center;padding: 0 20px;}
.page{background-color: #fff;padding: 50px 0;margin: 20px;text-align: center;font-size: 30px;font-weight: bold;}
</style>


